<template>
  <div style="font-size: 0.3rem">
    <p
      style="
        font-size: 0.9rem;
        width: 2.5rem;
        height: 1.2rem;
        background: #2e7aec;
        color: #fff;
        text-align: center;
        line-height: 1.2rem;
        margin: 0 auto;
        margin-top: 60%;
      "
    >
      妙手医生
    </p>
    <p style="color: #c1c1c1; text-align: center; margin-top: 1rem">
      为提供更好的服务，请先进行登录操作
    </p>
    <p>
      <button
        style="
          width: 4rem;
          height: 1rem;
          background: #2e7aec;
          color: #fff;
          margin-left: 1.8rem;
          text-align: center;
          line-height: 1rem;
          margin-top: 0.5rem;
          border-radius: 0.5rem;
          border: none;
        "
        @click="showPopup"
      >
        登录
      </button>
    </p>
    <div style="font-size: 0.35rem">
      <!-- 圆角弹窗（底部） -->
      <van-popup
        v-model:show="showBottom"
        round
        position="bottom"
        :style="{ height: '30%' }"
      >
        <p style="text-align: center; margin-top: 0.5rem">
          <span style="color: #ccc">————</span>请先登录<span style="color: #ccc"
            >————</span
          >
        </p>
        <p>
          <span
            style="
              width: 2rem;
              height: 0.8rem;
              display: inline-block;
              text-align: center;
              line-height: 0.8rem;
              border: 0.01rem solid #ccc;
              margin-left: 0.5rem;
              border-radius: 0.4rem;
            "
            @click="qx"
            >暂不登录</span
          >
          <span
            style="
              width: 4rem;
              height: 0.8rem;
              background: #2e7aec;
              display: inline-block;
              text-align: center;
              color: #fff;
              line-height: 0.8rem;
              border: 0.01rem solid #ccc;
              margin-left: 0.5rem;
              border-radius: 0.4rem;
            "
            @click="ty"
            >同意隐私协议并登录</span
          >
        </p>
        <p style="margin-left: 0.5rem">
          <van-checkbox v-model="checked"
            ><span style="color: #ccc">已阅读并同意</span
            ><span><a href="/ding/xieyi">《妙手医生服务协议》</a></span
            ><span><a href="/ding/xieyi">《妙手医生隐私政策》</a></span
            ><span style="color: #ccc">及</span
            ><span
              ><a href="/ding/xieyi">《妙手医生儿童个人信息保护规则》</a></span
            ></van-checkbox
          >
        </p>
      </van-popup>
    </div>
    <div>
      <van-popup v-model:show="show" :style="{ padding: '64px' }"
        >请先勾选服务协议及隐私政策</van-popup
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const showBottom = ref(false)

const showPopup = () => {
  showBottom.value = true
}
const qx=()=>{
    showBottom.value=false
}

const show=ref(false)
const ty = () => {
  if (checked.value == false) {
    show.value=true
  }
}

const checked = ref(false)
</script>

<style></style>
